<template>
  <Card>
    <Row :gutter="15">
      <i-col span="6">
        <Card>
          <p slot="title">
            <Icon type="ios-film-outline" />&nbsp;App
          </p>
          <ul class="list">
            <li 
              v-for="item in data5" 
              :key="item.Id" 
              @click="itemClicked(item)"
            >
              <Icon type="document-text" /> &nbsp;{{ item.channel }}
            </li>
          </ul>
        </Card>
      </i-col>
      <i-col span="18">
        <Card>
          <Row slot="title">
            <Col span="12">
            <p>
              <Icon type="ios-film-outline" />&nbsp;版本管理 ({{ temp.channel }})
            </p>
          </Col>
          <!-- <Col span="12"><Button style="float: right" size="small" type="primary" @click="updateSfDesc">保存</Button></Col> -->
          </Row>
          <Row>
            <Col span="24">
            <dtable 
              add 
              :data-all="tableData" 
              :columns="columns" 
              @refresh="getVersions(temp)" 
              @add="addClicked"
            />
          </Col>
          </Row>

        </Card>
      </i-col>
    </Row>
    <Modal 
      v-model="addFlag" 
      :title="title" 
      @on-ok="okClicked" 
      @on-cancel="cancelClicked"
    >
      <Form 
        ref="updateForm" 
        :model="formItem" 
        :label-width="80" 
        :rules="ruleInline"
      >
        <FormItem 
          label="Channel" 
          prop="channel"
        >
          <Input 
            v-model="formItem.channel" 
            placeholder="Channel"
          ></Input>
        </FormItem>
        <FormItem 
          label="Package" 
          prop="package"
        >
          <Input 
            v-model="formItem.package" 
            placeholder="com.constream_cloud.lzqysoft"
          ></Input>
        </FormItem>
        <FormItem 
          label="版本号" 
          prop="version_code"
        >
          <Input 
            v-model.number="formItem.version_code" 
            placeholder="10"
          ></Input>
        </FormItem>
        <FormItem label="更新内容">
          <Input 
            v-model="formItem.content" 
            placeholder="app变动"
          ></Input>
        </FormItem>
        <FormItem 
          label="apk MD5" 
          prop="md5"
        >
          <Input 
            v-model="formItem.md5" 
            placeholder="apk文件md5值"
          ></Input>
        </FormItem>
        <FormItem 
          label="版本名" 
          prop="version_name"
        >
          <Input 
            v-model="formItem.version_name" 
            placeholder="1.0"
          ></Input>
        </FormItem>
        <FormItem 
          label="下载地址" 
          prop="url"
        >
          <Input 
            v-model="formItem.url" 
            disabled 
            placeholder="apk下载地址"
          ></Input>
        </FormItem>
        <FormItem>
          <Upload 
            ref="upload" 
            :on-success="handleSuccess" 
            :show-upload-list="false" 
            :format="['apk']" 
            :max-size="102400" 
            :on-format-error="handleFormatError" 
            :on-exceeded-size="handleMaxSize" 
            :on-remove="handleRemove" 
            :before-upload="handleBeforeUpload" 
            :action="actionUrl"
          >
            <Button 
              type="ghost" 
              icon="ios-cloud-upload-outline"
            >apk文件上传</Button>
          </Upload>
        </FormItem>

      </Form>

    </Modal>
  </Card>
</template>

<script>
import moment from "moment";
import dtable from "@/components/table/btable.vue"; //采用biztable
import { SERVER_CPT_URL, STATIS_HOST } from "@/api/config";
export default {
  name: "AppVersion",
  components: {
    dtable
  },
  data() {
    return {
      addFlag: false,
      data5: [],
      tableData: [],
      formItem: {
        channel: "",
        package: "",
        version_code: "",
        url: "",
        content: "",
        md5: "",
        size: "",
        version_name: ""
      },
      ruleInline: {
        channel: [
          {
            required: true,
            message: "必填",
            trigger: "blur"
          }
        ],
        package: [
          {
            required: true,
            message: "必填",
            trigger: "blur"
          }
        ],
        version_code: [
          {
            required: true,
            message: "必填",
            type: "number",
            trigger: "blur"
          },
          {
            type: "number",
            min: 10,
            message: "必须是数值",
            trigger: "change"
          }
        ],
        url: [
          {
            required: true,
            message: "必填",
            trigger: "change"
          }
        ],
        md5: [
          {
            required: true,
            message: "必填",
            trigger: "blur"
          }
        ],
        version_name: [
          {
            required: true,
            message: "必填",
            trigger: "blur"
          }
        ],
        size: [
          {
            required: true,
            message: "必填",
            trigger: "blur"
          }
        ]
      },
      temp: {},
      columns: [
        {
          title: " ",
          type: "index",
          width: 50
        },
        {
          title: "channel",
          key: "Channel"
        },
        {
          title: "package",
          key: "Package"
        },
        {
          title: "版本号",
          key: "VersionCode"
        },
        {
          title: "版本编码",
          key: "VersionName"
        },
        {
          title: "MD5",
          key: "Md5"
        },
        {
          title: "发布时间",
          key: "Ctime",
          render: (h, { row }) => {
            return h(
              "span",
              {},
              moment(row["Ctime"]).format("YYYY-MM-DD HH:mm")
            );
          }
        }
      ]
    };
  },
  computed: {
    title() {
      return `${this.temp.channel}发布新版本`;
    },
    state() {
      return this.$store.state.app;
    },
    actionUrl() {
      return SERVER_CPT_URL + "/upload/FileUpload?token=" + this.state.token;
    }
  },
  mounted() {
    this.getAppChannel();
  },
  methods: {
    okClicked() {
      this.$refs["updateForm"].validate(valid => {
        if (valid) {
          this.UpdateApp(this.formItem);
        } else {
        }
      });
    },
    cancelClicked() {
      this.$refs["updateForm"].resetFields();
    },
    handleBeforeUpload() {},
    handleSuccess(res, file) {
      // console.log(res)
      if (res.code == 0) {
        this.$Message.success("上传成功！");
        this.formItem.size = res.jdata["size"];
        this.formItem.url = STATIS_HOST + res.jdata["fid"];
      }
    },
    handleFormatError(file) {
      this.$Message.error("文件类型错误！");
    },
    handleRemove() {},
    handleMaxSize(file) {
      this.$Message.error("文件过大！");
    },
    addClicked() {
      console.log("add");
      this.addFlag = true;
    },
    getAppChannel() {
      this.$api.GetApps().then(res => {
        if (res.code == 0) {
          this.data5 = res.Data;
          if (this.data5.length > 0) {
            this.temp = this.data5[0];
            this.formItem.channel = this.temp.channel;
            this.formItem.package = this.temp.package;
            this.getVersions(this.temp);
          }
        }
      });
    },
    itemClicked(item) {
      // console.log(item)
      this.temp = item;
      this.formItem.channel = this.temp.channel;
      this.formItem.package = this.temp.package;
      this.getVersions(item);
    },
    getVersions(item) {
      this.$api.GetAppVersion(item).then(res => {
        if (res.code == 0) {
          this.tableData = res.Data;
        }
      });
    },
    UpdateApp(info) {
      this.$api.UpdateApp(info).then(res => {
        if (res.code == 0) {
          this.addFlag = false;
          this.$Message.success("已发布新版本！");
          this.getVersions(this.temp);
        }
      });
    }
  },
};
</script>

<style scoped>
.list {
  padding: 15px;
  padding-top: 5px;
}

.list > li {
  margin: 5px;
  margin-bottom: 15px;
  color: #000;
  font-size: 12px;
  cursor: pointer;
  font-size: 14px;
}
</style>
